<template>
  <div class="add_subject_portfolio">
    <a-card :title="title" :bordered="false" style="width: 1200px">
      <div class="container">
        <a-form-model
          ref="ruleForm"
          layout="vertical"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-row :gutter="20">
            <a-col :span="12">
              <a-form-model-item label="项目集名称" prop="name">
                <a-input v-model="form.name" placeholder="请输入项目集名称" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="所属部门" prop="department">
                <a-select v-model="form.department" placeholder="请选择所属部门">
                  <a-select-option v-for="(item, index) in departList" :key="index" :value="item.id">
                    {{ item.departName }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="项目集描述">
                <template>
                  <div style="border: 1px solid #ccc">
                    <Toolbar
                      style="border-bottom: 1px solid #ccc"
                      :editor="editor"
                      :defaultConfig="toolbarConfig"
                      :mode="mode"
                    />
                    <Editor
                      style="height: 240px; overflow-y: hidden"
                      v-model="form.description"
                      :defaultConfig="editorConfig"
                      :mode="mode"
                      @onCreated="onCreated"
                    />
                  </div>
                </template>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
        <a-affix :offset-bottom="0" @change="affixChange">
          <div class="btn_group" :class="{ affixCss: isAffix }">
            <a-button type="primary" style="background: #3883fa; border-color: #3883fa" @click="onSubmit">
              保存
            </a-button>
            <a-button style="margin-left: 10px" @click="goBack"> 返回 </a-button>
          </div>
        </a-affix>
      </div>
    </a-card>
  </div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { addSubject, querySubjectPortfolioById, editSubjectPortfolio } from '@/api/subject/stManager.js'
import { getDepartmentList } from '@api/seting/department.js'
export default {
  name: 'addSubjectPortfolio',
  components: { Editor, Toolbar },
  inject: ['closeCurrent'],
  data() {
    return {
      id: null,
      title: '新增项目集',
      whetherValid: null,
      isAffix: '',
      rules: {
        name: [{ required: true, message: '请输入项目集名称', trigger: 'change' }],
        department: [{ required: true, message: '请选择所属部门', trigger: 'change' }],
      },
      form: {
        department: undefined,
        name: '',
        description: '',
      },
      labelCol: { span: 24 },
      wrapperCol: { span: 24 },
      departList: [],
      editor: null,
      toolbarConfig: {
        excludeKeys: ['group-image', 'group-video', 'fullScreen', 'emotion', 'codeBlock', 'code'],
      },
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default', // or 'simple'
    }
  },
  mounted() {
    this.id = this.$route.query.id
    if (this.$route.query.id) {
      this.title = '修改项目集'
      this.getDetail()
    }
    this.getDepartment()
  },
  methods: {
    getDetail() {
      querySubjectPortfolioById({ id: this.id }).then((res) => {
        let data = res.result
        this.form.department = data.department
        this.form.name = data.name
        this.form.description = data.description
        this.whetherValid = data.whetherValid
      })
    },
    // 获取所属部门
    getDepartment() {
      getDepartmentList({ userId: this.$store.getters.userInfo.id }).then((res) => {
        if (res.code == 0) {
          this.departList = res.result
        }
      })
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    affixChange(status) {
      this.isAffix = status
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log(this.form, 'this.form')
          if (this.id) {
            let params = {
              setId: this.id,
              whetherValid: this.whetherValid,
              ...this.form,
            }
            editSubjectPortfolio(params).then((res) => {
              if (res.code === 200) {
                this.$message.success('修改成功')
                this.$router.push({ path: '/subject/stManager' })
                this.closeCurrent()
              }
            })
          } else {
            addSubject(this.form).then((res) => {
              if (res.code === 200) {
                this.$message.success('新增成功')
                this.$router.push({ path: '/subject/stManager' })
                this.closeCurrent()
              }
            })
          }
        } else {
          return false
        }
      })
    },
    goBack() {
      this.closeCurrent()
      this.$router.push({ path: '/subject/stManager' })
    },
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="less" scoped>
.add_subject_portfolio {
  display: flex;
  align-items: center;
  justify-content: center;

  ::v-deep .ant-card {
    border-radius: 4px;
  }

  ::v-deep .ant-card-head {
    padding: 0 120px;
  }

  ::v-deep .ant-card-head-title {
    color: #30394a;
    font-size: 16px;
    font-weight: 700;
  }

  ::v-deep .ant-card-body {
    padding: 12px 16px;

    .container {
      margin: 0 104px;
    }
  }

  ::v-deep .ant-form label,
  ::v-deep .ant-input,
  ::v-deep .ant-form-item,
  ::v-deep .ant-form-explain,
  ::v-deep .ant-form-extra {
    font-size: 13px;
  }

  ::v-deep .ant-form-item {
    margin-bottom: 12px;
  }

  .btn_group {
    text-align: center;
    padding: 16px 0;

    ::v-deep .ant-btn {
      padding: 0 30px;
    }
  }

  .affixCss {
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid rgb(235, 237, 243);
  }
}
</style>
